<template>
  <!-- 上传：
      el-upload
          action:上传的接口地址，必传参数
          name:上传文件对应接口的参数名，默认file
          show-file-list:是否显示上传文件列表
          before-upload:上传前，它可以限制上传文件的大小与类型，return boolean  true:正常上传  false:中止上传
          on-success:上传成功的回调，它可以拿到上传成功后的接口返回值，非自定义上传时使用
          http-request：自定义上传（自己完成整 个上传形为）
 -->

  <div>
    <el-upload
      action="#"
      :http-request="httpRequest"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <div v-if="!avatar">上传</div>
      <img v-else :src="avatar" alt="">
    </el-upload>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  data() {
    return {
      avatar: ''
    }
  },
  methods: {
    beforeUpload(res) {
      console.log('beforeUpload', res)
      const limitPng = res.type === 'image/png'
      if (!limitPng) {
        this.$message.error('请上传png图片')
      }
      const limitSize = res.size / 1024 < 1
      if (!limitSize) {
        this.$message.error('请上传1kb以内的png图片')
      }

      return limitPng && limitSize
    },
    httpRequest(res) {
      console.log(res)
      cos.putObject(
        {
          Bucket: 'abc-1305249343' /* 必须:存储桶 */,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: '/hm86/' + res.file.name /* 必须:名字，要求一定是字符串 */,
          StorageClass: 'STANDARD', // 固定配制
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            // 上传的进度值
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // 上传结束
          // err有值就是失败了，没值才是成功
          // 成功才有data,data中有上传完成的接口返回值
          this.avatar = 'http://' + data.Location
          console.log(err || data)
        }
      )
    }
  }
}
</script>
<style></style>
